跳至主要內容

安装React

安装React

React 从诞生之初就是 可被渐进式使用 的。因此你可以选择性地使用 React 特性。不管你是想体验下 React，用它为简单的 HTML 页面增加交互，还是重新搭建一个由 React 驱动的复杂应用，本章节内容都能帮你快速入门。

Try React

无需进行任何安装，即可体验：

function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

export default function App() {
  return <Greeting name="world" />
}

你可以直接对它进行编辑，或点击右上角的 “Fork” 按钮在一个新的标签页中打开。

React 文档中的大部分页面都包含这样的 sandbox。除 React 文档以外，还存在许多支持 React 的在线代码编辑器：例如 CodeSandbox，StackBlitz，或者 CodePen。

想要在本地尝试 React，你可以 下载这个 HTML 页面。然后就可以使用编辑器或是浏览器打开它了！

HTML demo

(这节我 (LincZero) 自己加的)

注意区分: 可被渐进式使用 和 渐近式框架，区别可见 渐近式特征与渐近式采用

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
    
      function MyApp() {
        return <h1>Hello, world!</h1>;
      }

      const container = document.getElementById('root');
      const root = ReactDOM.createRoot(container);
      root.render(<MyApp />);

    </script>
    <!--
      Note: this page is a great way to try React but it's not suitable for production.
      It slowly compiles JSX with Babel in the browser and uses a large development build of React.

      Read this page for starting a new React project with JSX:
      https://react.dev/learn/start-a-new-react-project

      Read this page for adding React with JSX to an existing project:
      https://react.dev/learn/add-react-to-an-existing-project
    -->
  </body>
</html>

参考一下 vue 的写法:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const { createApp, ref } = Vue // window.Vue

</script>

React 的渐近式不如 vue 方便 (毕竟 vue 主打的就是渐近式框架的招牌)。
其使用不像 vue 只要引入一个 vue.gloabl.js，他得引入三个依赖: react, react-dom, babel，体积也更大。并且该方式的使用形式并不被官方推荐使用于生产环境中

创建一个 React 应用

如果你想开始一个新的 React 应用，你可以用我们推荐的框架 创建一个 React 应用。

从零构建一个 React 应用

如果框架不适合你的项目，你更倾向于自己配置框架，或者你只是单纯想学习配置 React 应用的基础知识，你可以参照 从零构建一个 React 应用.

添加 React 到一个已有的项目

Note

注意

我还应该用 Create React App 么？

不， Create React App 已经不建议使用。更多信息可参照 Sunsetting Create React App.

更多信息，参见 逐步淘汰 Create React App。

下一节

前往 快速入门 章节。以学习你每天都会遇到且最为重要的 React 概念。

链接到当前文件 0
没有文件链接到当前文件